<script lang="ts" setup>
import { NotificationsCircle } from "@vicons/ionicons5";
</script>
<template>
  <div class="wrapper">
    <n-icon size="28" color="red">
      <NotificationsCircle></NotificationsCircle>
    </n-icon>
    <n-carousel
      direction="vertical"
      :show-dots="false"
      :show-arrow="false"
      autoplay
      style="width: 100%; height: 60px; margin-left: 6px"
    >
      <div class="text">一号粮仓发生起火</div>
      <div class="text">二号粮仓发生也起火</div>
      <div class="text">三号粮仓发生也起火</div>
      <div class="text">四号粮仓发生也起火</div>
    </n-carousel>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
}
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.text {
  height: 60px;
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
